﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:vc="clr-namespace:Songhay.ValueConverters;assembly=Songhay.Mvvm"
    Tag="Animation: Swapping Visuals">
    <UserControl.Resources>
        <vc:InverseBooleanConverter x:Key="InverseBooleanConverter" />

        <!--
            FUNKYKB: Duplicate storyboards are used here because:

                * Silverlight threw an exception when Element-Name Binding
                was attempted with attached property Storyboard.TargetName.

                * Expression Blend has Duplicate and Reverse commands
                in the Objects andTimeline view.

            Expression Blend 4 can only see Storyboard elements as keyed resources.
        -->
        <Storyboard x:Key="MyStory"
            AutoReverse="False">
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleIn"
                Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0" />
                <SplineDoubleKeyFrame KeyTime="0:0:2.5" Value="1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleIn"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-160"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="1.25" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleOut"
                Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleOut"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-160">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut" Amplitude="1.25" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="MyStoryReversed"
            AutoReverse="False">
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleOut"
                Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0" />
                <SplineDoubleKeyFrame KeyTime="0:0:2.5" Value="1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleOut"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-160"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut" Amplitude="1.25" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleIn"
                Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.75" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Storyboard.TargetName="RectangleIn"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-160">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut" Amplitude="1.25" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Style TargetType="ToggleButton">
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="Width" Value="160" />
        </Style>
        <Style TargetType="Rectangle">
            <Setter Property="Height" Value="160" />
            <Setter Property="Width" Value="160" />
        </Style>
    </UserControl.Resources>
    <StackPanel>
        <Grid>
            <Rectangle x:Name="RectangleIn" Fill="Blue">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="RectangleOut" Fill="Red">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
        <ToggleButton x:Name="MyToggle"
            Content="Swap"
            IsChecked="False" IsThreeState="False">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <i:EventTrigger.Actions>
                        <eim:ControlStoryboardAction
                            IsEnabled="{Binding ElementName=MyToggle, Path=IsChecked}"
                            Storyboard="{StaticResource MyStory}"
                            />
                        <eim:ControlStoryboardAction
                            IsEnabled="{Binding ElementName=MyToggle, Path=IsChecked, Converter={StaticResource InverseBooleanConverter}}"
                            Storyboard="{StaticResource MyStoryReversed}"
                            />
                    </i:EventTrigger.Actions>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ToggleButton>
    </StackPanel>
</UserControl>
